<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef">

      <template #category_id="{ record }">
        {{ record.cate ? record.cate.name : '' }}
      </template>
      <!-- 排序列 -->
      <template #sort="{ record }">
        <a-input-number :default-value="record.sort" mode="button" @change="changeSort($event, record.id)" :min="0"
                        :max="1000"/>
      </template>
      <!-- 图标列 -->
      <template #cover="{ record }">
        <a-image width="100" :src="record.cover"/>
      </template>
      <!-- 状态列 -->
      <template #status="{ record }">
        <a-switch :checked-value="1" unchecked-value="2" @change="changeStatus($event, record.id)"
                  :default-checked="record.status == 1"/>
      </template>
    </ma-crud>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import article from '@/api/cms/article'
import {Message} from '@arco-design/web-vue'

const crudRef = ref()

const changeStatus = async (status, id) => {
  const response = await article.changeStatus({id, status})
  if (response.success) {
    Message.success(response.message)
  }
}

const changeSort = async (value, id) => {
  const response = await article.numberOperation({id, numberName: 'sort', numberValue: value})
  if (response.success) {
    Message.success(response.message)
  }
}

const crud = reactive({
  api: article.getList,
  recycleApi: article.getRecycleList,
  showIndex: false,
  pageLayout: 'fixed',
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationWidth: 200,
  add: {show: true, api: article.save,},
  edit: {show: true, api: article.update,},
  delete: {
    show: true,
    api: article.deletes,
    realApi: article.realDeletes
  },
  recovery: {show: true, api: article.recoverys,},
  formOption: {viewType: 'drawer', width: 600},
  beforeOpenAdd: () => {
    columns[1].addDefaultValue = 0
    return true
  },
  beforeEdit: (params) => {
    delete params.cate
    return true
  }
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50},
  {
    title: '分类', dataIndex: 'category_id', formType: 'tree-select',
    dict: {url: 'cms/category/tree'}, addDefaultValue: 0,
    editDefaultValue: (record) => {
      return record.category_id == 0 ? undefined : record.category_id
    }
  },
  {
    title: '文章标题',
    dataIndex: 'title',
    search: true,
    commonRules: [{required: true, message: '文章标题必填'}],
    width: 100
  },
  {title: '副标题', dataIndex: 'subtitle', width: 100, hide: true},
  {title: '调用代码', dataIndex: 'code'},
  {title: '封面', dataIndex: 'cover', formType: 'upload', type: 'image', width: 120},
  {title: '视频', dataIndex: 'video', formType: 'upload', type: 'file', width: 120, hide: true},
  {title: '视频时长', dataIndex: 'video_duration', hide: true},
  {title: '发布日期', dataIndex: 'release_at', hide: true},
  {title: '摘要', dataIndex: 'brief', hide: true},
  {title: '排序', dataIndex: 'sort', formType: 'input-number', addDefaultValue: 100, min: 0, max: 1000, width: 150},
  {
    title: '评论数',
    dataIndex: 'comment_num',
    formType: 'input-number',
    addDefaultValue: 0,
    min: 0,
    width: 150,
    hide: true
  },
  {title: '浏览数', dataIndex: 'browse_num', formType: 'input-number', addDefaultValue: 0, min: 0, width: 150},
  {
    title: '点赞数',
    dataIndex: 'like_num',
    formType: 'input-number',
    addDefaultValue: 0,
    min: 0,
    width: 150,
    hide: true
  },
  {
    title: '状态', dataIndex: 'status', formType: 'radio', width: 120,
    dict: {
      data: [{label: '正常', value: '1'}, {label: '停用', value: '2'}],
      translation: true
    },
    addDefaultValue: '1',
  },
  {
    title: '内容',
    dataIndex: 'content',
    formType: 'editor',
    commonRules: [{required: true, message: '内容必填'}],
    hide: true
  },
  {title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false, width: 180,},
])
</script>

<script>
export default {name: 'cms:article'}
</script>

<style scoped>
.icon {
  width: 1em;
}
</style>
  